<template>
	<view class="container">
		<u-navbar class="container_nav" back-icon-color="#fff" :border-bottom="false" title="简历置顶" placeholder
			:background="{ background: 'transparent' }" title-color="#fff"></u-navbar>
		<view class="container_image">
			<u-image :src="url + '/static/image03.jpg'" width="100vw" height="482rpx" mode="widthFix"></u-image>
		</view>

		<u-pay :height="data.height" :list="data.list"></u-pay>
	</view>
</template>

<script setup>
	import development from '/config/development'
	import production from '/config/productions'
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({
		height: null,
		list: []

	})
	onReady(() => {
		getNavHeight()
	})
	onLoad(()=>{
		getServiceList()
	})
	const getServiceList = async () => {
		let params = {
			type: 'stick'
		}
		let res = await uni.$u.api.getServiceList({
			params
		})
		data.list = res.items
	}
	const getNavHeight = async () => {
		let res = await uni.$u.getRect('.container_nav')
		// #ifndef MP-WEIXIN
		data.height = 228 + uni.$u.sys().statusBarHeight - res.height + 'px'
		// #endif
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.height = 241 - res.height + menuButtonInfo.height + 'px'
		// #endif
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		&_image {
			position: absolute;
			top: 0;
			padding-top: var(--status-bar-height);
		}
	}
</style>